<template>
    <a href="javascript:;"  class="articleItem" @click="goTodetail">
        <img class="cover" v-lazy="data.imageUrls" :alt="data.title">
        <div class="info">
            <h4 class="title">
                {{data.title}}
            </h4>
            <p>
                <label class="time">{{ data.createtime * 1000 | dateformat('YYYY-MM-DD HH:mm')}}</label>
            </p>
        </div>
    </a>
</template>


<style lang="scss">
    .articleItem{
        width: 100%;
        height: 146px;
        background: #FFF;
        padding: 0 30px;
        margin-bottom: 50px;
        display: flex;
        text-decoration: unset;
        .cover{
            width: 190px;
            height: 146px;
            object-fit: cover;
            border-radius: 4px;
            background: #999;
            overflow: hidden;
            font-size: 0;
        }
        .info{
            height: 140px;
            width: 430px;
            margin-left: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title{
                font-weight:bold;
                color:rgba(2,2,2,1);
                line-height:46px;
                font-size:30px;
                margin: 0;
                padding: 0;
                height: 84px;
                overflow: hidden;
                 display: -webkit-box;
            　　-webkit-box-orient: vertical;
            　　-webkit-line-clamp: 2;
            }
            p{
                height: 22px;
                margin: 0;
                padding: 0;
                display: flex;
                *{
                    font-size: 22px;
                    color: inherit;
                }
                .time{
                    color: #333;
                }
            }
        }
    }
</style>

<script>
import Vue from "vue";
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);
export default {
    name: "articleItem",
    props:{
        data:{
            type: Object,
            value: () => {
                return {}
            },
        }
    },
    methods:{
        goTodetail(){
            let url = this.data.linkurl || this.data.url
            if(url && url!="#"){
                window.open(url)
            }
        }
    }
}
</script>